{% extends 'base_my_center.html' %}
{% block link_css %}
        <script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/user_follow.js"></script>
    <style type="text/css">

      .tab_css {
        color: #31c27c;
        display: none;
        {#float: left;#}
      }
    </style>
    <script type="text/javascript">
      var myclick = function(v) {
        var llis = document.getElementsByTagName("li");
        for(var i = 0; i < llis.length; i++) {
          var lli = llis[i];
          if(lli == document.getElementById("tab" + v)) {
            lli.style.color = "#61bd7c";
          } else {
            lli.style.color = "black";
          }
        }
        var divs = document.getElementsByClassName("tab_css");
        for(var i = 0; i < divs.length; i++) {
          var divv = divs[i];
          if(divv == document.getElementById("tab" + v + "_content")) {
            divv.style.display = "block";
          } else {
            divv.style.display = "none";
          }
        }
      }
    </script>
{% endblock %}

{% block content %}
    <div class="main main--profile" style="">
        <div class="mod_tab profile_nav" role="nav" id="nav">
           <a class="mod_tab__item" href="{{ url('users:i_like') }}" id="like_tab" data-tab="like" data-stat="y_new.profile.tab.like">我喜欢</a>
            <a class="mod_tab__item" href="{{ url('users:center') }}" id="create_tab" data-tab="create" data-stat="y_new.profile.tab.create_playlist">我创建的歌单</a>
            <a class="mod_tab__item mod_tab__current" href="{{ url('users:follow') }}" id="focus_tab" data-tab="focus" data-stat="y_new.profile.tab.focus">关注</a>
            <a class="mod_tab__item" href="javascript:;" id="fans_tab" data-tab="fans" data-stat="y_new.profile.tab.fans">粉丝</a>
            <a class="mod_tab__item" href="{{ url('users:user_modify') }}" id="uploadmv_tab" >个人设置</a>
			<a class="mod_tab__item" href="javascript:;" id="radio_tab" data-tab="radio" data-stat="y_new.profile.tab.radio" style="display:none;">主播电台</a>
        </div>

		<!-- 关注 -->
		<div class="js_box" id="focus_box" style="">
			<div class="mod_tab" role="nav">
				<li class="mod_tab__item" href="javascript:;" id="tab1" onclick="myclick(1)" style="color: #61bd7c">歌手</li>
				<li class="mod_tab__item" href="javascript:;" id="tab2" onclick="myclick(2)" >用户</li>
			</div>
			<div class="profile_cont">

				<div class="js_sub tab_css" id="tab1_content" style="display: block">
{#                    <div class="">#}
{##}
{#                    <div class="none_txt">#}
{#                <i class="none_txt__symbols"></i>#}
{#		#}
{#		<p>什么也没有，去看看<a href="/singers/1">热门歌手</a>！</p>#}
{#		#}
{#            </div>#}
{#        </div>#}
                <div class="mod_singer_list mod_singer_list--fans">
                <ul class="singer_list__list">

                {% if user_follow %}
                {% for x in user_follow %}
                    <li class="singer_list__item">
                        <div class="singer_list__item_box">
                            <a href="/singers_detail/?id={{ x.artist_id }}" class="singer_list__cover js_singer" hidefocus="true" data-mid="001fNHEf1SFEFN" data-id="13948">
                                <img class="singer_list__pic" src="{{ x.artist_img }}" onerror="this.src='//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000';this.error=null;" alt="{{ x.artist_name }}">
                            </a>
                            <h3 class="singer_list__title"><a href="/singers_detail/?id={{ x.artist_id }}" data-mid="001fNHEf1SFEFN" data-id="13948" class="js_singer" title="{{ x.artist_name }}">{{ x.artist_name }}</a></h3>
			    <p class="singer_list__info">1212.7万人关注</p>
                            <div class="singer_list__focus">
                                <a href="javascript:;" class="mod_btn singer_list__btn_focus del_singer" user_id="{{ user_id }}" song_id="{{ x.artist_id }}">

					<span class="btn_focus__cont"><i class="mod_btn__icon_yes"></i>已关注</span>

                                </a>
                            </div>
                        </div>
                    </li>
                {% endfor %}
                {% else %}
                                        <div class="">

                    <div class="none_txt">
                <i class="none_txt__symbols"></i>

		<p>什么也没有，去看看<a href="/singers/1">热门歌手</a>！</p>

            </div>
        </div>
                {% endif %}
		</ul>
	   </div>
                </div>
				<div class="js_sub tab_css"id="tab2_content"><div class="">

            <div class="none_txt">
                <i class="none_txt__symbols"></i>

		<p>没有关注任何用户... </p>

            </div>
        </div></div>
			</div>
		</div>

		</div>
{% endblock %}



